<template>
    <div class="mod-building">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.fullName" placeholder="楼栋全称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">{{ $t('handle.search') }}</el-button>
                <el-button  type="primary" @click="addOrUpdateHandle()">{{ $t('handle.add') }}</el-button>
                <el-button  type="danger"  @click="deleteHandle()" :disabled="dataListSelections.length <= 0">{{ $t('handle.batchDelete') }}</el-button>
            </el-form-item>
            </el-form>
        <el-table
            :data="dataList"
            border
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column
                type="selection"
                header-align="center"
                align="center"
                width="50">
            </el-table-column>
             <el-table-column
                v-if='show'
                prop="id"
                header-align="center"
                align="center"
                width="80"
                label="ID">
            </el-table-column>
            <el-table-column
                fixed
                type="index"
               :label="$t('tabble.No')"
                width="50"
                :index="indexMethod">
            </el-table-column>
            <el-table-column
                prop="fullName"
                header-align="center"
                align="center"
                label="楼栋全称">
            </el-table-column>
            <!-- <el-table-column
                prop="shortName"
                header-align="center"
                align="center"
                label="简称">
            </el-table-column> -->
            <!-- <el-table-column 当前登录人有自己的楼栋id
                prop="housingName"
                header-align="center"
                align="center"
                label="所属小区">
            </el-table-column> -->
            <el-table-column
                prop="unitNumber"
                header-align="center"
                align="center"
                label="单元号">
            </el-table-column>
            <el-table-column
                prop="floorNumber"
                header-align="center"
                align="center"
                label="楼层数">
            </el-table-column>
             <el-table-column
                prop="lowestLivingFloor"
                header-align="center"
                align="center"
                label="最低居住楼层">
            </el-table-column>
             <el-table-column
                prop="highestLivingFloor"
                header-align="center"
                align="center"
                label="最高居住楼层">
            </el-table-column>
            <el-table-column
                prop="purpose"
                header-align="center"
                align="center"
                label="楼栋用途">
                <template slot-scope="scope">
                    <span>{{purposeFilter(scope.row.purpose)}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column
                prop="manageName"
                header-align="center"
                align="center"
                label="物管姓名">
            </el-table-column>
            <el-table-column
                prop="managePhone"
                header-align="center"
                align="center"
                label="物管联系电话">
            </el-table-column> -->
            <!-- <el-table-column
                prop="griddingId"
                header-align="center"
                align="center"
                label="所属网格">
            </el-table-column>
            <el-table-column
                prop="dgStandardInfoId"
                header-align="center"
                align="center"
                label="楼栋所在地址">
            </el-table-column> -->
            <el-table-column
                prop="delFlag"
                header-align="center"
                align="center"
                label="是否删除">
            <template slot-scope="scope">
                <el-tag
                    :type="scope.row.delFlag == 1 ? 'success' : 'danger'"
                    >{{dictTypeFilter(scope.row.delFlag)}}</el-tag>
                <!-- <span>{{dictTypeFilter(scope.row.delFlag)}}</span> -->
            </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                header-align="center"
                align="center"
                width="150"
                :label="$t('handle.handle')">
                <template slot-scope="scope">
                <el-button  type="text" size="small"  @click="addOrUpdateHandle(scope.row.id)">{{ $t('handle.update') }}</el-button>
                <el-button  type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('handle.delete') }}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<script>
 import AddOrUpdate from './building-add-or-update'
export default {
    data(){
        return {
            dataForm: {
                fullName: ''
            },
            dicts:[],
            dictType:{1:'未删除'},
            purposeDicts: [],
            purposeDictType: {1: '商用'},
            show: false,
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            addOrUpdateVisible: false
        }
    },
    computed: {
    dictTypeFilter () {
      return function (type) {
            /** do something */
            return this.dictType[type]
        }
    },
    purposeFilter(){
        return function (type){
            return this.purposeDictType[type]
        }
    }
  },
     // 引入的组件
    components: {
      AddOrUpdate
    },
    created() {
      this.getDelStatus()
      this.getPurpose()
    },
    // 一进页面就加载
    activated(){
        // this.getDataList()
    },
    methods: {
        indexMethod(index){
            return index+1
        },
        // 获取楼栋用途
        getPurpose(){
            this.$http({
            url: 'dg-ic/ic/dict/type/purpose_type',
            method: 'get'
            }).then(({data})=>{
                if(data && data.code === 0){
                this.purposeDicts = data.data;
                for(let i = 0; i < data.data.length; i++){
                    this.purposeDictType[data.data[i].value] = data.data[i].label;
                };
                }
            })
        },
        // 删除状态
        getDelStatus(){
        this.$http({
        url: 'dg-ic/ic/dict/type/del_status',
        method: 'get'
        }).then(({data})=>{
            if(data && data.code === 0){
              this.dicts = data.data;
              for(let i = 0; i < data.data.length; i++){
                this.dictType[data.data[i].value] = data.data[i].label;
              };
            }
           })
        },
        // 根据小区id获取该小区下的楼栋数据
        getDataList(housingId,type){
            this.dataListLoading = true
            this.$http({
                url: `/dg-ic/ic/building/list`,
                method: 'get',
                params: this.$http.adornParams({
                'page': this.pageIndex,
                'limit': this.pageSize,
                'fullName': this.dataForm.fullName,
                'housingId':housingId
                // 后续如果有省市区继续加参数
                })
            }).then(({data})=>{
                if(data && data.code === 0){
                    this.dataList = data.data.list
                    this.totalPage = data.data.totalCount
                }else{
                    this.dataList = []
                    this.totalPage = 0
                }
                this.dataListLoading = false
            })
        },
        // 每页数
        sizeChangeHandle(val){
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
         // 当前页
        currentChangeHandle(val){
            this.pageIndex = val
            this.getDataList()
        },
        // 多选
        selectionChangeHandle(val){
            this.dataListSelections = val
        },
        // 新增/修改
        addOrUpdateHandle(id){
            this.addOrUpdateVisible = true
            this.$nextTick(()=>{
            this.$refs.addOrUpdate.init(id,this.purposeDicts)
            })
        },
         // 删除
        deleteHandle(id){
          var ids = id ? [id] : this.dataListSelections.map(item=>{
              return item.id
          })
          this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`,'提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(()=>{
              this.$http({
                  url: `/dg-ic/ic/building/delete`,
                  method: 'delete',
                  data: this.$http.adornData(ids,false)
              }).then(({data})=>{
                if(data && data.code === 0){
                this.$message({
                    message: '删除成功',
                    type: 'success',
                    duration: 1500,
                    onClose: ()=>{
                    this.getDataList()
                    }
                })
            }else{
              this.$message.console.error(data.msg);
                }
              })
          }).catch(()=>{})
        },
    }

}
</script>
